<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/welcome3' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<!--    <div>-->
<!--      <el-select v-model="value" placeholder="请选择要搜索的字段" size="mini">-->
<!--        <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      &lt;!&ndash;  搜索&ndash;&gt;-->
<!--      <el-input v-model="search" placeholder="请输入要查询的字段的值" style="width: 20%;margin-left: 10px" size="mini"></el-input>-->
<!--      <el-button type="primary" style="margin-top: 10px;margin-left: 10px" @click="ShowSearch()" icon="el-icon-search" size="mini">查询</el-button>-->
<!--    </div>-->
    <div style="margin-top: 10px;margin-bottom: 10px;">
      <el-button
          size="mini"
          type="primary"
          style="width: 160px"
          class="handle-del mr10"
          @click="ShowAllType()"
      >展示所有数据</el-button>
      <el-button
          size="mini"
          type="primary"
          style="width: 160px"
          class="handle-del mr10"
          @click="SchoolTypeAdd()"
          icon="el-icon-circle-plus-outline"
      >添加学校类型</el-button>
<!--      <el-button-->
<!--          type="primary"-->
<!--          class="handle-del mr10"-->
<!--          @click="Import()"-->
<!--      >导入</el-button>-->
      <el-button
          size="mini"
          type="primary"
          style="width: 160px"
          class="handle-del mr10"
          @click="Export"
          icon="el-icon-download"
      >导出</el-button>
    </div>
    <el-table
        size="mini"
        :data=this.tableData1
        border
        hidden
        id="out-table1"
        :header-cell-style="{background:'lightblue',color:'#262626'}"
        style="width: 396px">
      <el-table-column
          prop="schooltypecode"
          label="学校办学类型代码"
          width="135">
      </el-table-column>
      <el-table-column
          prop="schooltypename"
          label="学校办学类型名称"
          width="160">
      </el-table-column>
    </el-table>
    <el-table
        size="mini"
        :row-style="{height:'10px'}"
        :cell-style="{padding:'0px'}"
        :data=this.tableData
        border
        :header-cell-style="{background:'lightblue',color:'#262626'}"
        style="width: 396px">
      <!--      <el-table-column-->
      <!--          prop="id"-->
      <!--          label=""-->
      <!--          width="50"-->
      <!--      >-->
      <!--      </el-table-column>-->

      <el-table-column
          prop="schooltypecode"
          label="学校办学类型代码"
          align="center"
          width="135">
      </el-table-column>
      <el-table-column
          prop="schooltypename"
          label="学校办学类型名称"
          align="center"
          width="160">
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row),dialogFormVisible = true" type="text" size="small">修改</el-button>
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title=this.modeName :visible.sync="dialogFormVisible" :show-close=false width="950px">
      <hr style="margin-top: -30px;margin-bottom: 10px">
      <el-form :model="ruleForm" :rules="rules" :inline="true" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="学校办学类型代码" prop="schooltypecode">
          <el-input v-model="ruleForm.schooltypecode"></el-input>
        </el-form-item>
        <el-form-item label="学校办学类型名称" prop="schooltypename">
          <el-input v-model="ruleForm.schooltypename"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm'),allid=''">确定</el-button>
<!--        <el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="dialogFormVisible = false,allid=''">取 消</el-button>
        <!--        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  methods:{
    submitForm(formName) {
      const _this=this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.allid) {
            axios.put("http://localhost:8081/schooltype/update", this.ruleForm).then(function (res) {
              if (res.data.msg === "更新成功") {
                _this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                //添加成功后页面跳转
                // _this.$router.push('/SchoolType')
                _this.dialogFormVisible = false
                _this.ShowAllType()
              } else {
                _this.$message({
                  message: '学校类型重复！请重新输入',
                  type: 'fail'
                });
              }
            })
          }
          else {
            axios.post("http://localhost:8081/schooltype/save",this.ruleForm).then(function (res){
              // console.log(res);
              if (res.data.msg==="添加成功"){
                _this.$message({
                  message: '添加成功！',
                  type: 'success'
                  //添加成功后页面跳转
                });
                _this.dialogFormVisible = false
                _this.ShowAllType()
                // _this.$router.push('/SchoolType')
              }
              else{
                _this.$message({
                  message: '学校类型代码重复！请重新输入',
                  type: 'fail'
                });
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      console.log("我按了",formName)
      this.$refs[formName].resetFields();
    },
    page(currentPage){
      const _this=this
      axios.get('http://localhost:8081/school/page?current='+currentPage+'&size=8').then(function (res) {
        // console.log(res.data)
        _this.tableData = res.data.schoolList;
        _this.total = res.data.total;

      })
    },
    ShowAllType(){
      const _this=this
      axios.get('http://localhost:8081/schooltype/findAll').then(function (res){
        _this.tableData=res.data
      })
    },
    ShowSearch(){
      const _this=this
      axios.get("http://localhost:8081/schooltype/search/"+this.value+'/'+this.search).then(function (res){
        _this.tableData=res.data
        _this.search=''
      })
    },
    // edit(row){
    //   //将当前行对象传过去
    //   this.$router.push({
    //     path:'/UpdateSchoolType',
    //     //query带参数传递
    //     query:{
    //       id:row.id
    //     }
    //   })
    // },
    Export(){
      let tables = document.getElementById("out-table1");
      console.log(tables)
      let table_book = this.$XLSX.utils.table_to_book(tables);
      var table_write = this.$XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        this.$FileSaver.saveAs(
            new Blob([table_write], { type: "application/octet-stream" }),
            "SchoolType.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      return table_write;
    },
    SchoolTypeAdd(){
      // this.$router.push("/AddSchoolType")
      this.dialogFormVisible = true;
      this.modeName='添加学校类型'
      this.ruleForm={}
    },
    edit(row){
      // axios.get("http://localhost:8081/schooltype/selectone/"+row.id).then((res)=>{
      //   this.ruleForm=res.data
      // })
      this.dialogFormVisible = true
      this.modeName='更新学校类型'
      this.ruleForm=row
      this.allid=row.id
    },

    del(row){
      const d=confirm("确定删除吗？");
      if (d){
        axios.delete('http://localhost:8081/schooltype/delete/'+row.schooltypecode).then(()=>{
          alert("删除成功")
          // location.reload();
          this.ShowAllType()
        })
      }

    }

  },

  data(){
    return {
      options: [{
        value: '1',
        label: '学校办学类型代码'
      }, {
        value: '2',
        label: '学校办学类型名称'
      }, ],
      value: '',
      search:'',
      total:null,
      allid:'',
      mode:'',
      modeName:'',
      tableData: null,
      tableData1: null,
      ruleForm: {
        // id:'',
        schooltypecode: '',
        schooltypename: ''
      },
      rules: {
        id: [
          { required: true, message: '请填写编号 注意与已存在的编号不要重复', trigger: 'blur' }
        ],
        schooltypecode: [
          { required: true, message: '请填写学校办学类型编码', trigger: 'blur' }
        ],
        schooltypename: [
          { required: true, message: '请填写学校办学类型名称', trigger: 'blur' }
        ],
      },
      dataList: [],
      fileList: [],
      query: {"page":0, "size":20, count:0},
      column: [
        // {label: "序号", prop: "id", type: "string"},
        {label: "学校办学类型代码", prop: "schooltypecode", type: "string"},
        {label: "学校办学类型名称", prop: "schooltypename", type: "string"},

      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      editForm: {},
      editVisible: false,
      currentIndex: null,

    }
  },
  created() {
      const _this=this
      const a=localStorage.getItem("access-admin")
      if(a){
        axios.get('http://localhost:8081/schooltype/findAll').then(function (res){
          // console.log(res.data)
          _this.tableData=res.data
          _this.tableData1=res.data
        })
      }
      else{
        this.$alert('未登录','提示',{
          confirmButtonText:'确定'
        }).then((res)=>{
          this.$router.replace({path:'/login'})
        })
      }
  }
}
</script>
